<template>
  <div class="artBox">
<ul v-infinite-scroll="load" infinite-scroll-distance="30" class="listBox" >
     <li v-for="(item,index) in myList" :key="index" class="infinite-list-item artItem">
    <div class="artInfo">
      <h2 class="title" @click="goDetail(item._id)">{{item.title}}</h2>
      <div class="desc">{{item.desc}}</div>
      <div class="info">
       <span class="readCount">
        <i class="el-icon-view">{{item.readCount}}</i>
       </span>
       <span class="commentCount">
        <i class="el-icon-chat-dot-round">{{item.commentCount}}</i>
       </span>
       <span class="fondCount">
        <i class="el-icon-star-off">{{item.foundCount}}</i>
       </span>
       <span class="publicDate">
        <i class="el-icon-time">{{$dayjs(item.createDate).format('YYYY-MM-DD hh:mm:ss')}}</i>
       </span>
      </div>
    </div>
    <div class="cover" @click="goDetail(item._id)">
      <img :src="$baseUrl+item.coverUrl" alt="">
    </div>
    </li>
</ul>
  <div class="bottomList">
    我也是有底线的~~~~~~~~~
  </div>
  </div>
</template>

<script>
  export default {
    props:['list'],
    data () {
      return {
        myList:[],
        isNeedLoad:true
      }
    },
    methods: {
      load () {
        if(!this.isNeedLoad) return
        this.$emit('needLoad')
      },
      goDetail(id){
        // 跳转页面并且 重新打开一个窗口
        window.open('#/artDetail/' + id)
      }
    },
    mounted() {
      // 监听全局事件
      this.$bus.$on('onSearch',(data)=>{
        if(!data){
          this.myList = JSON.parse(JSON.stringify(this.list))
          this.isNeedLoad=true
          return
        }
        // 开始渲染搜索数据
        this.isNeedLoad=false
        this.myList = data
      })
    },
    watch:{
      list(val){
        this.myList = JSON.parse(JSON.stringify(val))
      }
    }
  }
</script>

<style lang="less" scoped>
.artBox{
  padding-left: 150px;
}
.title,
.cover{
  cursor: pointer;
}
.bottomList{
  margin: 5px auto;
  text-align: center;
  font-size: 16px;
  color: #333;
}
.listBox{
  min-height: 80vh;
  overflow: visible;
}
 .artItem{
  width: 680px;
  height:160px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
  margin-top: 15px;
  .artInfo{
    float: left;
    height: 100%;
    width: 560px;
    position: relative;
    .title{
      margin: 0;
      padding: 0;
    }
    .desc{
      color: #666;
      margin-top: 10px;
      font-size: 14px;
    }
    .info{
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: 13px;
      color: #666;
       i{
          margin-right: 5px;
        }
      span{
        margin-right: 15px;
       
      }
    }
  }
  .cover{
    float: right;
    width: 120px;
    height: 120px;
    img{
      width: 100%;
      border-radius: 5px;
    }
  }
 }

</style>